<template>
  <div v-show="flag">

  
  <div class="category_page">
    <div class="top">
      <div class="">分类</div>
      <div class="iconfont icon-sousuo" @click="inputFun"></div>
    </div>

    <van-tabs @change="getSearchBookFun" v-model="active">
      <van-tab title="都市">
        <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="玄幻">
        <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="悬疑">
        <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="历史">
        <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="军事">
        <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="科幻">
        <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="同人">
       <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="短篇">
        <div class="content">
          <div
            v-for="(item, index) in bookList"
            :key="index"
            class="item"
            @click="goDetails(item.id, item.title)"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部导航 -->
    <footer-nav></footer-nav>
  </div>
  </div>
</template>

<script>
import footerNav from "../components/base/footerNav.vue";
import { getStoreInfo } from "../api/base";
import { getSearchBook } from "../api/category";
export default {
  data() {
    return {
      flag:false,
      active: 0,
      num: 7, //默认打开都市
      bookList: [], //都市列表
      catIdList: [7, 1, 5, 11, 3, 2, 10, 12], //7.都市  1.玄幻  5.悬疑  11.历史  3.军事  2.科幻  10.同人  12.短篇
    };
  },
  methods: {
    inputFun() {
      this.$router.push("/search");
    },

    getStoreInfoFun() {
      getStoreInfo().then((data) => {
        console.log(data);
      });
    },

    // https://apis.netstart.cn/yunyuedu/source/v2/searchBook.json?catId=7&wordCount=0&pay=0&bookStatus=0&sort=1
    // 获取分类书籍
    // 都市
    getSearchBookFun() {
      this.$toast.loading({
        message: "加载中...",
        overlay: true,
      });
      this.num = this.catIdList[this.active];
      getSearchBook({
        catId: this.num,
        wordCount: 0,
        pay: 0,
        bookStatus: 0,
        sort: 1,
      }).then((data) => {
        console.log(data);
        //  都市小说列表
        this.bookList = data.list;
        if (this.bookList.length != 0) {
          console.log(111);
          this.$toast.clear();
          this.flag = true;
        }
      });
    },

    // text(){
    //   this.num=this.catIdList[this.active];
    //   console.log(this.num);
    // },

    // 去详情看书
    goDetails(id, title) {
      // 调用vuex存储状态
      // this.$store.commit("setBookInfo",{id,title});
      this.$store.commit("setBookInfo", { id, title });
      this.$router.push({ name: "introduce" });
    },
  },
  components: {
    footerNav,
  },

  created() {
    this.getStoreInfoFun();
    this.getSearchBookFun();
  },
};
</script>

<style lang="less">
.category_page {
  width: 100%;
  padding: 0 20px;
  padding-bottom: 40px;
  box-sizing: border-box;
  background-color: #f6f6f6;
  .top {
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
    .icon-sousuo {
      width: 18px;
      height: 18px;
    }
  }
  .van-tabs{
    padding-bottom: 30px;
  }
  .van-tabs__wrap {
    margin-bottom: 10px;
    background-color: #f6f6f6;
    
    .van-tab {
      padding-left: 0;
    background-color: #f6f6f6;
      
    }
    .van-tabs__nav{
      background-color: #f6f6f6;
      padding-left: 0;
      padding-right: 0;
    }
    .van-tabs__line {
      left: -5px;
      width: 30px;
    }
  }

  .van-tabs__content {
    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        
        
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 14px;
        .img {
          margin-bottom: 14px;
          img {
            width: 96px;
            height: 132px;
          }
        }
        .title {
          width: 96px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-bottom: 8px;
        }
        .author {
          line-height: 14px;
          font-size: 14px;
          color: #a4a4a4;
        }
      }
    }
  }
}
</style>